/*
 * @Description: 订单列表单个item
 * @Author: ziwei.ma
 * @Date: 2019-07-23 13:47:33
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-09-05 13:48:55
 */
<template>
  <div
    class="order-item-warpper flex-v"
    @click="goToOrderDetail"
  >
    <div class="order-status-warpper flex-h flex-hsb flex-vc fontsize32">
      <span>{{item.storeName}}</span>
      <span class="baseColorNoAcitve">{{item.stateText}}</span>
    </div>
    <!-- 商品图片和信息 -->
    <div class="order-information-warpper flex-h">
      <img :src="item.orderImgUrl">
      <div class="order-information flex-v flex1 ">
        <div class="flex-h flex-vc">
          <span class="flex1 fontsize32">{{item.orderName}}</span>
          <span class="fontsize28">x{{item.orderNum}}</span>
        </div>
      </div>
    </div>
    <!-- 总计和按钮 -->
    <div class="total-and-btn flex-h flex-vc flex1 fontsize28">
      <span class="total flex1">合计：¥{{item.payFee}}</span>
      <div
        class="btn flex-h"
        @click.stop
      >
        <template v-for="(option,index) in item.btnList">
          <component
            :is="getComponent(option)"
            :key="'btn' + index"
            :orderNo="item.orderNo"
            :payment="item.payment"
            :outOrderNo="item.outOrderNo"
            :tag="tag"
            pageType="TYPE_CUSTOM"
            @afreshState="afreshState"
          />
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import payBtn from '../../btnsComponent/payBtn'
import cancleBtn from '../../btnsComponent/cancleBtn'
import deleteBtn from '../../btnsComponent/deleteBtn'
// 按钮
const CANCLE_BTN = 2 // 取消订单
const PAY_BTN = 1 // 立即付款
const DELETE_BTN = 15 // 删除订单
export default {
  components: {
    'pay-btn': payBtn,
    'cancle-btn': cancleBtn,
    'delete-btn': deleteBtn
  },
  props: {
    item: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      tag: 1 // 1: 订单列表 2：订单详情
    }
  },
  methods: {
    goToOrderDetail() {
      this.$AppRouterUtils.open('customRouteOrderDetail.html?_tv=true&ORDER_NO=' + this.item.orderNo)
    },
    // 动态加载组件
    getComponent(type) {
      switch (type) {
        case CANCLE_BTN:
          return 'cancle-btn'
        case PAY_BTN:
          return 'pay-btn'
        case DELETE_BTN:
          return 'delete-btn'
      }
    },
    // 操作成功之后交由上层处理
    afreshState() {
      this.$emit('afreshState')
    }
  }
}
</script>

<style scoped>
.order-item-warpper {
  width: 622px;
  height: 346px;
  border-radius: 8px;
  background-color: #fff;
  padding: 0 32px;
  margin-bottom: 32px;
}
.order-status-warpper {
  height: 95px;
  border-bottom: 1px solid #dddddd; /*no*/
  font-weight: 400;
}
.order-information-warpper {
  height: 178px;
}
.order-information-warpper > img {
  margin: 16px 32px 0 0;
  width: 144px;
  height: 144px;
}
.order-information {
  margin-top: 26px;
}
.order-information > span {
  margin-top: 16px;
  color: #999999;
}
</style>
